<template>
  <div class="relative inline-flex items-center justify-center rounded-full overflow-hidden">
    <img :src="src" :alt="alt" class="w-full h-full object-cover" :class="sizeClass" />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps<{
    src: string;
    alt: string;
    size?: 'sm' | 'md' | 'lg';
  }>();

  const sizeClass = computed(() => {
    switch (props.size) {
      case 'sm':
        return 'w-8 h-8';
      case 'lg':
        return 'w-12 h-12';
      default:
        return 'w-10 h-10';
    }
  });
</script>
